<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="饿了么-热门单品.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>

<body>
  <div class="app">
    <h3>
        <span>&lt;</span>
        <span>饿了么</span>
    </h3>
    <main id="products">
        <div class="top">热门单品</div>
        <div class="list">
            <div class="item" v-for="(item,index) in productlist" v-bind:key="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                    <div class="content">
                        <div class="name">{{ item.name }}</div>
                        <div class="discount">{{ item.price }}</div>
                        <div class="coin"><span class="iconfont icon-jindou"></span>{{ item.coins }}</div>
                        <div class="condition">{{ item.store }}&gt;</div>
                    </div>
                </div>
                <div class="right">
                    <button>{{item.change}}</button>
                </div>
            </div>
        </div>
    </main>
  </div>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    //实例化Vue对象
    var v = new Vue({
         //Vue实例挂载的dom节点
         el:'#products',
         data:{
            productlist:[
                {id:1,pic:'./images/01.gif',name:"脐橙3斤 快递到家",price:"兑换后入手价6.9元",coins:"10",store:"适用门店",change:"立即兑"},
                {id:2,pic:'./images/02.gif',name:"耙耙柑2斤 快递到家",price:"兑换后入手价9.9元",coins:"30",store:"适用门店",change:"立即兑"},
                {id:3,pic:'./images/03.gif',name:"水果捞350g",price:"兑换后入手价6.9元",coins:"60",store:"适用门店",change:"立即兑"},
            ]
         }

    })
</script>
